@import "../common/init.scss";
@import "../common/constats";
@import "../common/header";
@import "../common/body";
@import "../common/footer";
@import "../common/news_list.scss";

body{
    background: #f2f2f2;
}


.main{
    .wrapper{
        .main-content-wrapper{
            .banner-group{
                width:100%;
                height: $bannerHeight;
                // background: black;
                position:relative;
                // 隐藏超出的轮播图部分
                z-index: 0;

                overflow: hidden;
                .banner-ul{
                    overflow: hidden;
                    width: $bannerWidth*4;
                    position: absolute;
                    left:0;
                    li{
                        float: left;
                        width:$bannerWidth;
                        height:$bannerHeight;
                        img{
                            width:$bannerWidth;
                            height: $bannerHeight;
                        }
                    }

                }
                .arrow{
                    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                    font-size: 70px;
                    color:#fff;
                    position: absolute;
                    top: 50%;
                    margin-top: -45px;
                    cursor: pointer;
                    display: none;

                }
                .left-arrow{
                    left:20px;
                }
                .right-arrow{
                    right:20px;
                }
                .page-control-group{
                    position: absolute;
                    left:0;
                    right:0;
                    bottom: 20px;
                    .page-control{
                        // 这里需要设置宽度 才能生效居中
                        margin: 0 auto;
                        overflow: hidden;
                        // 改为动态设置
                        //width: 12px*4 + 8px*2*3 + 8px*2;
                        li{
                            width:12px;
                            height: 12px;
                            border: 1px solid #fff;
                            border-radius: 50px;
                            float: left;
                            margin: 0 8px;
                            // 没有外边的1px
                            box-sizing: border-box;
                            cursor: pointer;
                            // 添加选中状态
                            &.active{
                                background: #fff;
                            }

                        }
                    }
                }
                
            }

        }
    }
}

.main{
    .wrapper{
        .main-content-wrapper{
            .list-outer-group{
                background: #ffffff;
                margin-top: 20px;

                .list-tab{
                    width: 100%;
                    height: 66px;
                    border: 1px solid $lineColor;
                    border-left: none;
                    border-right: none;
                    overflow: hidden;
                    li{
                        float:left;
                        padding: 0 10px;
                        //line-height: 66px;
                        margin-top: 20px;
                        a{
                            color:$assistFontColor;
                        }
                        // 伪类 找到父元素下的第一个li
                        &:first-of-type{
                            border-left: 5px solid $themeColor;
                        }
                        &.active{
                            a{
                                color:$mainFontColor;
                            }
                        }
                    }

                }
                .list-inner-group{
                    @include news_list;
                }
                .load-more-group{
                    padding: 20px;
                    text-align: center;
                    .load-more{
                        width:402px;
                        height:40px;
                        background: #d2dcea;
                        color:#6d85ac;
                        border:none;
                        outline:none;
                        cursor: pointer;
                    }
                }
            }

        }
    }
}



